<template>
  <div id="index-container">
    <div class="header">
      <h1>易查企app后台管理系统</h1>
      <router-link to="/user">
        <img
          v-if="headPic"
          :src="`http://localhost:3005/${headPic}`"
          alt="头像"
          width="50"
          height="50"
        />
        <el-icon v-else :size="30"><User /></el-icon>
      </router-link>
    </div>
    <div class="body">
      <el-row class="tac">
        <el-col :span="4">
          <el-menu router :default-active="activeMenu">
            <el-menu-item index="/user-management">
              <el-icon><User /></el-icon>
              <router-link to="/user-management">
                <span>用户管理</span>
              </router-link>
            </el-menu-item>
            <el-sub-menu index="/enterprise">
              <template #title
                ><el-icon><OfficeBuilding /></el-icon>企业信息管理</template
              >
              <el-menu-item index="/enterprise/basic">
                <el-icon><LocationFilled /></el-icon>
                <router-link to="/enterprise/basic">
                  <span>企业基本信息</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/enterprise/background">
                <el-icon><Management /></el-icon>
                <router-link to="/enterprise/background">
                  <span>企业背景信息</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/enterprise/ranking">
                <el-icon><Histogram /></el-icon>
                <router-link to="/enterprise/ranking">
                  <span>行业数据排名</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/enterprise/patent">
                <el-icon><Promotion /></el-icon>
                <router-link to="/enterprise/patent">
                  <span>企业专利信息</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/enterprise/trademark">
                <el-icon><List /></el-icon>
                <router-link to="/enterprise/trademark">
                  <span>企业商标信息</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/enterprise/executive">
                <el-icon><Avatar /></el-icon>
                <router-link to="/enterprise/executive">
                  <span>企业高管信息</span>
                </router-link>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/community">
              <template #title
                ><el-icon><Service /></el-icon>用户互动与社区管理</template
              >
              <el-menu-item index="/community/post">
                <el-icon><Postcard /></el-icon>
                <router-link to="/community/post">
                  <span>社区帖子</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/community/comment">
                <el-icon><Comment /></el-icon>
                <router-link to="/community/comment">
                  <span>社区评论</span>
                </router-link>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/statistics">
              <template #title>
                <el-icon><PieChart /></el-icon>统计</template
              >
              <el-menu-item index="/statistics/behavior">
                <el-icon><Connection /></el-icon>
                <router-link to="/statistics/behavior">
                  <span>用户行为分析</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/statistics/query">
                <el-icon><Search /></el-icon>
                <router-link to="/statistics/query">
                  <span>查询数据分析</span>
                </router-link>
              </el-menu-item>
              <el-menu-item index="/statistics/operation">
                <el-icon><DataLine /></el-icon>
                <router-link to="/statistics/operation">
                  <span>运营数据分析</span>
                </router-link>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
        <el-col class="right" :span="20">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/api/user'

const route = useRoute()
const activeMenu = ref(route.path)
const headPic = ref('')

watch(route, (newRoute) => {
  activeMenu.value = newRoute.path
})

const queryInfo = async () => {
  const res = await getUserInfo()
  const { data } = res.data
  if (res.status === 200 || res.status === 201) {
    headPic.value = data.headPic
  }
}

onMounted(() => {
  queryInfo()
})
</script>

<style scoped lang="scss">
#index-container {
  height: 100vh;
  .header {
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #aaa;
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .body {
    .right {
      height: calc(100vh - 60px);
      overflow: auto;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .el-menu {
      height: calc(100vh - 60px);
      overflow: auto;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }

      border-right: 1px solid #dcdfe6;
    }
    .el-menu a {
      text-decoration: none; /* 去掉下划线 */
      color: inherit; /* 继承 el-menu-item 的颜色 */
      display: block; /* 让整个菜单项都能点击 */
      width: 100%;
      height: 100%;
    }
  }
}
</style>
